<template>
  <div class="non-trace-form-item">
    <el-form ref="ruleForm" :label-position="'top'" label-width="80px" :model="formLabelAlign">

      <SkyPanel title="项目经理信息列表" id="first">
        <template v-slot:main>

          <div class="module-container" v-for="(item,index)   in formLabelAlign.projectManagerInformation" :key="index">
            <div class="module-header-container">
              <div>项目经理{{index+1}}</div>
              <div></div>
              <div>删除</div>
            </div>
            <div class="module-main-container">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="项目经理姓名" prop="key1" :rules="[
                    { required: true, message: '请输入项目经理姓名', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号" prop="key2" :rules="[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key2"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="身份证号" prop="key3" :rules="[
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="邮箱地址" prop="key4" :rules="[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key4"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="劳动合同开始、结束日期" prop="key5" :rules="[
                    { required: true, message: '请输入劳动合同开始、结束日期', trigger: 'blur' },
                  ]">
                  <el-col :span="8">
                     <el-input v-model="item.key5"></el-input>
                  </el-col>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="服务类别" prop="key6" :rules="[
                    { required: true, message: '请选择服务类别', trigger: 'blur' },
                  ]">
                    <el-select v-model="item.key6">
                       <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="主要业绩" prop="key7" :rules="[
                    { required: true, message: '请输入主要业绩', trigger: 'blur' },
                  ]">
                    <el-input v-model="item.key7"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
              <el-col :span="8">
                  <div class="card-uploader">
                  <el-form-item label="身份证复印件" prop="key8" :rules="[
                    { required: true, message: '请上传身份证复印件', trigger: 'blur' },
                  ]" style="border:none">
                    <div class="label-content">
                        支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                    </div>
                    <div class="uploading">
                        <div>
                          <el-upload action="#" list-type="picture-card" :auto-upload="false">
                          <template #default>
                            <i class="el-icon-plus"></i>
                          </template> 
                          <template #file="{file}">
                            <div>
                              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                              <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </template>
                        </el-upload>
                        <el-dialog v-model="dialogVisible">
                          <img width="100%" :src="dialogImageUrl1" alt="">
                        </el-dialog>
                        </div>

                        <div>
                            <el-upload action="#" list-type="picture-card" :auto-upload="false">
                          <template #default>
                            <i class="el-icon-plus"></i>
                          </template>
                          <template #file="{file}">
                            <div>
                              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                              <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </template>
                          </el-upload>
                          <el-dialog v-model="dialogVisible">
                            <img width="100%" :src="dialogImageUrl2" alt="">
                          </el-dialog>
                        </div>
                        
                      </div>
                    
                  </el-form-item>  
                  </div>
              </el-col>
              <el-col :span="8">
                <div class="card-uploader">
                        <el-form-item label="证书附件" prop="key9" :rules="[
                    { required: true, message: '请上传证书附件', trigger: 'blur' },
                  ]">
                    <div class="label-content">
                        支持上传jpg,png,jpeg,bmp,上传文件不得大于5M
                    </div>

                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                      <template #default>
                        <i class="el-icon-plus"></i>
                      </template>
                      <template #file="{file}">
                        <div>
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                              <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img width="100%" :src="dialogImageUrl3" alt="">
                    </el-dialog>
                </el-form-item>
                    </div>
              </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="card-uploader">
                      <el-form-item label="项目经验" prop="key10" :rules="[
                          { required: true, message: '请上传项目经验', trigger: 'blur' },
                        ]">
                      <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange2" >
                        <el-button size="small" plain>上传项目经验</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </el-col>

                <el-col :span="8">
                  <div class="card-uploader">
                      <el-form-item label="社保附件 " prop="key10" :rules="[
                          { required: true, message: '请上传社保附件', trigger: 'blur' },
                        ]">
                      <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange2" >
                        <el-button size="small" plain>上传社保附件</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </el-col>

                <el-col :span="8">
                  <div class="card-uploader">
                      <el-form-item label="劳动合同复印件" prop="key11" :rules="[
                          { required: true, message: '请上传劳动合同复印件', trigger: 'blur' },
                        ]">
                      <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange2" >
                        <el-button size="small" plain>上传劳动合同复印件</el-button>
                      </el-upload>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="module-add">
            <img src="~@/assets/images/module-add.png" alt="">
            <span>新增项目经理</span>
          </div>

        </template>
      </SkyPanel>

    </el-form>
  </div>
  <div>
    <SkyPanelPositionGroup scrolltop='150' offsettop='150'>
      <SkyPanelPositionUnit prop="first" label="项目经理信息列表"></SkyPanelPositionUnit>
    </SkyPanelPositionGroup>
  </div>
  <div class="footer">
    <el-button  @click="prestep">上一步</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button type="primary" @click="next">下一步</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

  export default defineComponent({
    data() {
      return {
        dialogVisible:false,
        dialogImageUrl1:"",
        dialogImageUrl2:"",
        dialogImageUrl3:"",
        option:[
          {
            label:"请选择服务类别",
            value:"选项一"
          }
        ],
        formLabelAlign: {
          projectManagerInformation: [
            {
              key1: "",
              key2: "",
              key3: "",
              key4: "",
              key5: "",
              key6: "",
              key7: "",
              key8: "",
              key9: "",
              key10:""
            },
          ],
        },
      };
    },
    methods: {
      prestep(){
       this.$parent.active = 2;
      },
      next() {
        this.$parent.active = 4;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert("submit!");
          } else {
            alert("error submit!!");
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
    // setup() {

    // },
  });
</script>

<style lang="scss" scoped>
/**
 *表单样式
 */
.non-trace-form-item {
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding: 0 0 5px;
  }
  /deep/ .el-input__inner {
    outline: none;
    border: none;
  }
  /deep/ .el-form-item__content {
    border-bottom: 1px solid #dcdcdc;
  }
  /deep/ .el-select{
    width: 100%;
  }
}

.module-container {
  width: 100%;
  min-height: 100px;
  background: #f6f8fa;
  padding: 0 20px;
  margin-bottom: 20px;
  .module-header-container {
    display: flex;
    align-items: center;
    padding: 14px 0px;
    & > div:nth-child(1) {
      height: 28px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 28px;
      color: #333333;
      opacity: 1;
    }
    & > div:nth-child(2) {
      flex: 1;
      border-bottom: 1px dashed #dcdcdc;
      height: 1px;
      margin: 0 10px;
    }
    & > div:nth-child(3) {
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 22px;
      color: #1890ff;
      opacity: 1;
      cursor: pointer;
    }
  }

  /deep/ .el-input__inner {
    background: #f6f8fa !important;
    background-color: #f6f8fa !important;
  }
}

.module-add {
  display: flex;
  line-height: 50px;
  align-items: center;
  color: #1890ff;
  cursor: pointer;
  & > img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
.footer {
  height: 60px;
  width: 1164px;
  position: fixed;
  bottom: 0;
  background: white;
  z-index: 10;
  text-align: right;
  line-height: 60px;
}

.label-content {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: #999999;
  opacity: 1;
  margin-bottom: 15px;
}
.card-uploader{
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding: 0 0 5px;
  }
  /deep/ .el-input__inner {
    outline: none;
    border: none;
  }
  /deep/ .el-form-item__content {
    border-bottom: none;
  }
  /deep/ .el-upload--picture-card{
    margin-right: 10px;
  }
  /deep/ .el-button {
    width: 170px;
    height: 44px;
  }
  .uploading{
    display: flex;
    justify-content: start;
  }
}
</style>
